import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
	props: {
		tableData: Object, // 确保类型匹配
	},
	setup(props, context) {
		let formRulers = ref({});
		let formData = ref({});
		props.tableData.form.formList.forEach((item) => {
			item.validate && (formRulers.value[item.key] = item.validate);
			item.key && (formData.value[item.key] = item.value || null);
		});
		let formRef = ref();
		const handelDiaClose = () => {
			//重置表单验证
			formRef.value.resetFields();
			props.tableData.form.handelFormShow(false);
		};
		const submitForm = async () => {
			await formRef.value.validate((valid, fields) => {
				if (valid) {
					props.tableData.form.handelSubmit(formData.value);
				} else {
					console.log("表单校验失败!", fields);
				}
			});
		};
		return () => (
			<el-dialog onClose={handelDiaClose} v-model={props.tableData.form.formShow} title={props.tableData.form.formName || ""}>
				<el-form ref={formRef} rules={formRulers} model={formData.value} label-width={"120px"}>
					{props.tableData.form.formList.map((item) => {
						switch (item.type) {
							case "input":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-input style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} placeholder={item.placeholder} maxlength={item.maxLength} clearable={item.clearable || true} />
									</el-form-item>
								);
							case "select":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-select style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} placeholder={item.placeholder} clearable={item.clearable || true}>
											{item.optionList.map((items) => {
												return <el-option key={items.value} label={items.label} value={items.value} />;
											})}
										</el-select>
									</el-form-item>
								);
							case "datetime":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-date-picker style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} value-format={item.timeFormatter || "YYYY-MM-DD HH:mm:ss"} type="datetime" placeholder={item.placeholder} clearable={item.clearable || true} />
									</el-form-item>
								);
							case "timerange":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-date-picker style={{ width: item.width || "100%" }} value-format={item.timeFormatter || "YYYY-MM-DD HH:mm:ss"} v-model={formData.value[item.key]} type="datetimerange" start-placeholder={item.startPlaceholder || "开始时间"} end-placeholder={item.endPlaceholder || "结束时间"} clearable={item.clearable || true} />
									</el-form-item>
								);
							default:
								break;
						}
					})}
				</el-form>
				<div style={{ textAlign: props.tableData.form.btnAlign || "center" }}>
					<el-button onClick={handelDiaClose}>取消</el-button>
					<el-button type="primary" onClick={submitForm}>
						确认
					</el-button>
				</div>
			</el-dialog>
		);
	},
});
